<template>
  <div>
    <div class="leftMenu">
      <el-button>保存</el-button>
      <el-button>预览</el-button>
      <el-button type="primary" round @click="updateArticle">发布</el-button>
    </div>

    <div id="editor">
      <div>
        <p>文章标题</p>
        <input type="text" v-model="push.articleName">
      </div>
      <mavon-editor v-model="push.articleBody" ref="md" @imgAdd="imgAdd" @imgDel="imgDel" :subfield="true"/>
      <mavon-editor
        :value="push.articleBody"
        defaultOpen="preview"
        :boxShadow="false"
        style="z-index:1;height:50vh"
        :editable="false"
        :subfield="false"
        :toolbarsFlag="false"
      >
      </mavon-editor>
    </div>

  </div>
</template>

<script>
    export default {
        name: "Second",
      data() {
        return {
          push: {
            articleBody: "",
            articleDescription: "",
            articleFlag: 0,
            articleId: 0,
            articleImgUrl: "",
            articleName: "",
            classifyIdList: [
              1
            ],
            collectStatus: true,
            commentStatus: true,
            starStatus: true
          }
        }
      },
      methods : {
        imgAdd(pos, $file) {
          let formdata = new FormData()
          formdata.append('file', $file)
          this.$axios({
            url: '/file/upload',
            method: 'post',
            data: formdata,
            headers: {
              'Content-Type': 'multipart/form-data;charset=UTF-8',
              'aaa': 'aaa'
            },
          }).then((url) => {
            // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
            //    this.$vm.$img2Url(pos, url.data);
            this.$refs.md.$img2Url(pos, url.data);
          })
        },
        imgDel(pos) {
          delete this.imgFile[pos]
        },
        updateArticle() {
          var article = {
            context: "",
            articleDescription: "",
            articleFlag: 0,
            articleImgUrl: "",
            name: "",
            classifyIdList: [
              1
            ],
            collectStatus: true,
            commentStatus: true,
            starStatus: true
          }
          article.context = this.push.articleBody
          article.articleDescription = this.push.articleDescription
          article.articleFlag = this.push.articleFlag
          article.articleImgUrl = this.push.articleImgUrl
          article.name = this.push.articleName
          article.classifyIdList = this.push.classifyIdList
          article.collectStatus = this.push.collectStatus
          article.commentStatus = this.push.commentStatus
          article.starStatus = this.push.starStatus
          document.cookie = "user_info=1;path = /"
          console.log(article)
          this.$http({
            url: 'http://localhost:8081/article/save',
            method: 'post',
            data: article
          }).then((url) => {
            if (url.data.Result == 1) {
              alert(url.data.Message)
            } else {
              alert(url.data.Message)
            }
          })
        }
      }
    }
</script>

<style scoped>

</style>
